<template>
  <div ref="dataScreen" class="list-table">
    <el-row v-loading="loadChart">
      <el-col :span="12" style="min-height:300px;position: relative;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('区域统计') }}</span>
        </div>
        <Empty :data.sync="areaBarChartData.datas">
          <barLineChart v-if="areaBarChartData.datas.length > 0" ref="barChart" :chart-data="areaBarChartData" height="300px" @clickHandel="clickAreaBarChart" />
        </Empty>
      </el-col>
      <el-col :span="12" style="min-height:300px;position: relative;">
        <div>
          <div class="area-header">
            <span class="area-header-title">{{ $t('行业大类统计') }}</span>
          </div>
          <Empty :data.sync="firstChartData.datas">
            <pieChart v-if="firstChartData.datas.length > 0" :chart-data="firstChartData" height="300px" @xData="clickFirstChart" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12" style="min-height:300px;position: relative;">
        <div>
          <div class="area-header">
            <span class="area-header-title">{{ $t('行业细分统计') }}</span>
          </div>
          <Empty :data.sync="secondChartData.datas">
            <pieChart v-if="secondChartData.datas.length > 0" :chart-data="secondChartData" height="300px" @xData="clickSecondChart" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12" style="min-height:300px;position: relative;">
        <div>
          <div class="area-header">
            <span class="area-header-title">{{ $t('企业性质统计') }}</span>
          </div>
          <Empty :data.sync="enterpriseNatureChartData.datas">
            <pieChart v-if="enterpriseNatureChartData.datas.length > 0" :chart-data="enterpriseNatureChartData" height="300px" @xData="clickEnterpriseNature" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12" style="min-height:300px;position: relative;">
        <div>
          <div class="area-header">
            <span class="area-header-title">{{ $t('交易模式统计') }}</span>
          </div>
          <Empty :data.sync="transactionModeChartData.datas">
            <pieChart v-if="transactionModeChartData.datas.length > 0" :chart-data="transactionModeChartData" height="300px" @xData="clickTransactionMode" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12" style="min-height:300px;position: relative;">
        <div>
          <div class="area-header">
            <span class="area-header-title">{{ $t('客户来源统计') }}</span>
          </div>
          <Empty :data.sync="customerSourceChartData.datas">
            <pieChart v-if="customerSourceChartData.datas.length > 0" :chart-data="customerSourceChartData" height="300px" @xData="clickCustomerSource" />
          </Empty>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <component :is="path" />
    </el-dialog>
  </div>
</template>

<script>
  import { countLeaseDealArea, countLeaseDealIndustryFirst, countLeaseDealIndustrySecond, countLeaseDealEnterpriseNature, countLeaseDealTransactionMode, countLeaseDealCustomerSource } from '@/api/base/deal/dealBase'
  import barLineChart from '@/views/chart/barLineChart.vue'
  import pieChart from '@/views/chart/pieChart'
  import { getAsyncComponent } from '@/utils'
  export default {
    components: {
      barLineChart,
      pieChart
    },
    data() {
      return {
        loading: true,
        // 遮罩层
        loadChart: true,
        dialogVisible: false,
        // 弹出框地址
        path: '',
        title: '',
        // 总条数
        total: 0,
        // 区域统计
        areaBarChartData: {
          datas: []
        },
        // 行业大类统计
        firstChartData: {
          legend: true,
          radius: [0, '50%'],
          datas: []
        },
        // 行业细分统计
        secondChartData: {
          legend: true,
          radius: [0, '50%'],
          datas: []
        },
        // 企业性质统计
        enterpriseNatureChartData: {
          legend: true,
          radius: [0, '50%'],
          datas: []
        },
        // 交易模式统计
        transactionModeChartData: {
          legend: true,
          radius: [0, '50%'],
          datas: []
        },
        // 客户来源统计
        customerSourceChartData: {
          legend: true,
          radius: [0, '50%'],
          datas: []
        },
        // 是否显示弹出层
        formOpen: false,
        // 列表查询参数
        queryParams: {
          // 应为融资租赁类型
          dealType: 'lease',
          pageNum: 1,
          pageSize: 10
        },
        // 柱状图查询参数
        queryParams2: {
          dealType: 'lease',
          dealStatus: undefined
        }
      }
    },
    created() {
      this.getChart()
    },
    methods: {
      // 查询统计图
      getChart() {
        this.loadChart = true
        countLeaseDealArea(this.queryParams2).then(response => {
          this.areaBarChartData = {
            datas: [],
            valueFormatter: true,
            xLabel: []
          }
          if (response.data != null) {
            this.areaBarChartData.xLabel = response.data.map(v => v.areaName)
            this.areaBarChartData.datas = [
              {
                type: 'bar',
                name: this.$t('未收款租金'),
                data: response.data.map(v => { return { name: v.areaName, value: v.amount, count: v.count, areaId: v.areaId } })
              }
            ]
          }
          this.loadChart = false
        })
        countLeaseDealIndustryFirst(this.queryParams2).then(response => {
          this.firstChartData.tooltip = [
            { name: this.$t('行业'), field: 'name' },
            { name: this.$t('数量(个)'), field: 'value' },
            { name: this.$t('未收款租金'), field: 'noPaymentAmount', valueFormatter: true }
          ]
          this.firstChartData.datas = response.data.map(v => { return { name: v.industryFirst, value: v.count, noPaymentAmount: v.noPaymentAmount, type: v.industryFirstId } })
          this.loadChart = false
        })
        countLeaseDealIndustrySecond(this.queryParams2).then(response => {
          this.secondChartData.tooltip = [
            { name: this.$t('行业'), field: 'name' },
            { name: this.$t('数量(个)'), field: 'value' },
            { name: this.$t('未收款租金'), field: 'noPaymentAmount', valueFormatter: true }
          ]
          this.secondChartData.datas = response.data.map(v => { return { name: v.industrySecond, value: v.count, noPaymentAmount: v.noPaymentAmount, type: v.industrySecondId } })
          this.loadChart = false
        })
        countLeaseDealEnterpriseNature(this.queryParams2).then(response => {
          this.enterpriseNatureChartData.tooltip = [
            { name: this.$t('企业性质'), field: 'name' },
            { name: this.$t('数量(个)'), field: 'value' },
            { name: this.$t('未收款租金'), field: 'noPaymentAmount', valueFormatter: true }
          ]
          this.enterpriseNatureChartData.datas = response.data.map(v => { return { name: v.enterpriseNatureLabel, value: v.count, noPaymentAmount: v.noPaymentAmount, type: v.enterpriseNature } })
          this.loadChart = false
        })
        countLeaseDealTransactionMode(this.queryParams2).then(response => {
          this.transactionModeChartData.tooltip = [
            { name: this.$t('交易模式'), field: 'name' },
            { name: this.$t('数量(个)'), field: 'value' },
            { name: this.$t('未收款租金'), field: 'noPaymentAmount', valueFormatter: true }
          ]
          this.transactionModeChartData.datas = response.data.map(v => { return { name: v.transactionModeLabel, value: v.count, noPaymentAmount: v.noPaymentAmount, type: v.transactionMode } })
          this.loadChart = false
        })
        countLeaseDealCustomerSource(this.queryParams2).then(response => {
          this.customerSourceChartData.tooltip = [
            { name: this.$t('客户来源'), field: 'name' },
            { name: this.$t('数量(个)'), field: 'value' },
            { name: this.$t('未收款租金'), field: 'noPaymentAmount', valueFormatter: true }
          ]
          this.customerSourceChartData.datas = response.data.map(v => { return { name: v.customerSourceLabel, value: v.count, noPaymentAmount: v.noPaymentAmount, type: v.customerSource } })
          this.loadChart = false
        })
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.getChart()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
      },
      // 区域统计列表
      clickAreaBarChart(val) {
        this.title = '项目区域详情'
        this.dialogVisible = true
        let path = ''
        this.$route.params.type = val.areaId
        path = '@/views/report/leaseProjectRegionalStatistics'
        this.path = getAsyncComponent(path)
      },
      // 行业大类统计列表
      clickFirstChart(val) {
        this.title = '项目行业大类详情'
        this.dialogVisible = true
        let path = ''
        this.$route.params.type = val.type
        path = '@/views/report/leaseProjectIndustryFirst'
        this.path = getAsyncComponent(path)
      },
      // 行业细分统计列表
      clickSecondChart(val) {
        this.title = '项目行业细分详情'
        this.dialogVisible = true
        let path = ''
        this.$route.params.type = val.type
        path = '@/views/report/leaseProjectIndustrySecond'
        this.path = getAsyncComponent(path)
      },
      // 企业性质统计列表
      clickEnterpriseNature(val) {
        this.title = '项目企业性质详情'
        this.dialogVisible = true
        let path = ''
        this.$route.params.type = val.type
        path = '@/views/report/leaseProjectEnterpriseNature'
        this.path = getAsyncComponent(path)
      },
      // 交易模式统计列表
      clickTransactionMode(val) {
        this.title = '项目交易模式详情'
        this.dialogVisible = true
        let path = ''
        this.$route.params.type = val.type
        path = '@/views/report/leaseProjectTransactionMode'
        this.path = getAsyncComponent(path)
      },
      // 客户来源统计列表
      clickCustomerSource(val) {
        this.title = '项目客户来源详情'
        this.dialogVisible = true
        let path = ''
        this.$route.params.type = val.type
        path = '@/views/report/leaseProjectCustomerSource'
        this.path = getAsyncComponent(path)
      }
    }
  }
</script>
